<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="contianer">
       <a href="./herf/main-program-subroutine.html"> <div class="main-program-subroutine"><img src="./icon/樱桃.png" alt=""><span>主程序-子程序</span></div></a>
        <a href="./herf/object-oriented.html"><div class="object-oriented"><img src="./icon/橘子.png" alt=""><span>面向对象</span></div></a>
       <a href="./herf/event-system.html"> <div class="event-system"><img src="./icon/草莓.png" alt=""><span>事件系统</span></div></a>
      <a href="./herf/pipe-filter.html">  <div class="pipe-filter"><img src="./icon/香蕉.png" alt=""><span>管道-过滤器</span></div></a>
    </div>
</body>
<style>
    a {
        Text-decoration: none; 
        color: inherit;
    }
    .contianer {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .contianer a div {
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        width: 200px;
        height: 250px;
        text-align: center;
        margin: 0 20px;
        border: 2px solid rgba(87, 202, 152, 0.578);
        border-radius: 6%;
        background-color: rgb(230, 234, 235);
    }

    .contianer img {
        transition: all 1s;
        margin: 0 auto;
        width: 150px;
        height: 150px;
    }

    .contianer a div span{
        font-size: 30px;
        
    }

      .contianer div:hover img{
        width: 175px;
        height: 175px;
}
</style>
</html>